<!-- 统计分析 销售发货退货统计 -->
<template>
<view style="height: 100vh;">
<layout index="/pages/scm/index/index">
  <view class="carbon-container">
    <!-- 查询表单 -->
    <van-collapse v-model="activeCollapse" class="search-panel">
      <van-collapse-item title="筛选条件" name="search">
        <van-form @submit="handleQuery" class="search-form">
          <van-field
            v-model="queryParams.planNo"
            label="计划单号"
            label-width="4em"
            placeholder="请输入计划单号"
            clearable
            class="form-field"
          />
          <van-field
            v-model="queryParams.title"
            label="计划标题"
            label-width="4em"
            placeholder="请输入计划标题"
            clearable
            class="form-field"
          />
          <van-field
            label="计划类型"
            label-width="4em"
            placeholder="请选择计划类型"
            readonly
            clickable
            :value="selectedTypeLabel"
            @click="showTypePicker = true"
            class="form-field"
          >
            <template #button>
              <van-icon name="arrow-down" color="#2a9d8f" />
            </template>
          </van-field>
          <van-popup v-model:show="showTypePicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="typeOptions"
              value-key="dictLabel"
              @confirm="onTypeConfirm"
              @cancel="showTypePicker = false"
            />
          </van-popup>
          <van-field
            v-model="queryParams.materialName"
            label="产品名称"
            label-width="4em"
            placeholder="请输入产品名称"
            clearable
            class="form-field"
          />
          <div class="form-buttons">
            <van-button round type="primary" color="#2a9d8f" native-type="submit" class="search-button">
              搜索
            </van-button>
            <van-button round plain color="#2a9d8f" @click="resetQuery" class="reset-button">
              重置
            </van-button>
          </div>
        </van-form>
      </van-collapse-item>
    </van-collapse>

    <!-- 表格展示 -->
    <scroll-view scroll-x class="table-scroll">
      <view class="carbon-table">
        <view class="table-header bg-primary">
          <text class="header-item">计划单号</text>
          <text class="header-item">计划标题</text>
          <text class="header-item">计划类型</text>
          <text class="header-item">起始日期</text>
          <text class="header-item">结束日期</text>
          <text class="header-item">产品名称</text>
          <text class="header-item">目标销售额</text>
          <text class="header-item">销售额</text>
          <text class="header-item">状态</text>
        </view>
        <view 
          v-for="(item, index) in salePlanDetailReportList"
          :key="index"
          class="table-row"
          :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
        >
          <text class="row-item">{{ item.planNo }}</text>
          <text class="row-item">{{ item.title }}</text>
          <text class="row-item">{{ item.typeLabel }}</text>
          <text class="row-item">{{ formatDate(item.startDate) }}</text>
          <text class="row-item">{{ formatDate(item.endDate) }}</text>
          <text class="row-item">{{ item.materialName }}</text>
          <text class="row-item amount">¥{{ item.targetAmount }}</text>
          <text class="row-item amount">¥{{ item.saleAmount }}</text>
          <text class="row-item status">{{ item.status === '1' ? '已达成' : '未达成' }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 分页 -->
    <view class="pagination">
      <van-pagination
        v-model="queryParams.pageNum"
        :total-items="total"
        :items-per-page="queryParams.pageSize"
        @change="handlePageChange"
        class="pagination-component"
      />
    </view>

    <!-- 空状态 -->
    <van-empty
      v-if="salePlanDetailReportList.length === 0"
      description="暂无数据"
      image="/static/empty.png"
      class="empty-state"
    />
  </view>
</layout>
</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 模拟计划类型数据
const typeOptions = ref([
  { dictValue: '1', dictLabel: '月度计划' },
  { dictValue: '2', dictLabel: '季度计划' },
  { dictValue: '3', dictLabel: '年度计划' },
]);

// 模拟销售计划数据
const mockData = [
  {
    planNo: 'PLAN2023001',
    title: '2023年第一季度销售计划',
    type: '1',
    typeLabel: '月度计划',
    startDate: '2023-01-01',
    endDate: '2023-03-31',
    materialName: '光伏板',
    targetAmount: '500,000.00',
    saleAmount: '480,000.00',
    status: '1',
  },
  {
    planNo: 'PLAN2023002',
    title: '2023年第二季度销售计划',
    type: '2',
    typeLabel: '季度计划',
    startDate: '2023-04-01',
    endDate: '2023-06-30',
    materialName: '锂电池',
    targetAmount: '300,000.00',
    saleAmount: '250,000.00',
    status: '0',
  },
];

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  planNo: '',
  title: '',
  type: '',
  materialName: '',
});

// 数据初始化
const salePlanDetailReportList = ref([]);
const total = ref(0);
const loading = ref(false);
const activeCollapse = ref(['search']); // 控制折叠面板展开状态
const showTypePicker = ref(false);
const selectedTypeLabel = ref('');

// 格式化日期
const formatDate = (date) => {
  if (!date) return '';
  const [year, month, day] = date.split('-');
  return `${year}年${month}月${day}日`;
};

// 确认选择计划类型
const onTypeConfirm = (value) => {
  queryParams.type = value.dictValue;
  selectedTypeLabel.value = value.dictLabel;
  showTypePicker.value = false;
};

// 获取数据
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    // 模拟分页逻辑
    const filteredData = mockData.filter(item =>
      (!queryParams.planNo || item.planNo.includes(queryParams.planNo)) &&
      (!queryParams.title || item.title.includes(queryParams.title)) &&
      (!queryParams.type || item.type === queryParams.type) &&
      (!queryParams.materialName || item.materialName.includes(queryParams.materialName))
    );
    total.value = filteredData.length;
    salePlanDetailReportList.value = filteredData.slice(
      (queryParams.pageNum - 1) * queryParams.pageSize,
      queryParams.pageNum * queryParams.pageSize
    );
    loading.value = false;
  }, 500);
};

// 搜索操作
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置操作
const resetQuery = () => {
  queryParams.planNo = '';
  queryParams.title = '';
  queryParams.type = '';
  queryParams.materialName = '';
  selectedTypeLabel.value = '';
  handleQuery();
};

// 分页切换
const handlePageChange = () => {
  getList();
};

// 初始化数据
onMounted(() => {
  getList();
});
</script>

<style lang="scss">
.carbon-container {
  background-color: #f5fbf8; /* 页面背景色 */
  min-height: 100vh;
  padding: 20rpx;
  font-family: 'Arial', sans-serif;

  .search-panel {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(42, 157, 143, 0.1);

    .search-form {
      padding: 20rpx;

      .form-field {
        margin-bottom: 20rpx;
        border: 1px solid #e8f5f2;
        border-radius: 8rpx;
        background-color: #fff;

        &::after {
          border: none;
        }
      }

      .form-buttons {
        display: flex;
        justify-content: space-around;

        .search-button,
        .reset-button {
          width: 45%;
          height: 80rpx;
          font-size: 28rpx;
          line-height: 80rpx;
        }
      }
    }
  }

  .table-scroll {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;

    .carbon-table {
      min-width: 1000rpx; /* 确保表格宽度足够容纳所有列 */
      margin: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(42, 157, 143, 0.1);

      .table-header {
        background-color: #2a9d8f; /* 表头背景色 */
        padding: 24rpx;
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10rpx;

        .header-item {
          text-align: center;
          color: #fff; /* 表头文字颜色 */
          font-size: 28rpx;
          font-weight: 500;
          white-space: nowrap;
        }
      }

      .table-row {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 10rpx;
        padding: 20rpx;
        transition: all 0.3s;

        .row-item {
          text-align: center;
          font-size: 26rpx;
          color: #2a5d52; /* 表格内容文字颜色 */
          white-space: nowrap;

          &.amount {
            color: #76c893; /* 金额文字颜色 */
            font-weight: 500;
          }

          &.status {
            color: #e76f51; /* 状态文字颜色 */
            font-weight: 500;
          }
        }

        &:active {
          background-color: #e8f5f2; /* 点击时的背景色 */
        }
      }

      .bg-even {
        background-color: #fff; /* 偶数行背景色 */
      }

      .bg-odd {
        background-color: #f8fcfb; /* 奇数行背景色 */
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    padding: 20rpx 0;

    .pagination-component {
      --van-pagination-item-active-background-color: #2a9d8f;
      --van-pagination-item-active-color: #fff;
    }
  }

  .empty-state {
    margin-top: 100rpx;
  }
}
</style>